<template>
	<el-steps :active="step" finish-status="success" simple style="margin:20px;background-color: aliceblue;">
		<el-step title="服务基本信息" @click="step = 1" />
		<!-- <el-step title="确定操作表" @click="step = 2" />
		<el-step title="选择插入方式" @click="step = 3" /> -->
		<el-step title="信息确认" @click="step = 4" />
	</el-steps>
	<el-form :model="form" label-width="120px" style="width: 80%;" v-if="step == 1">
		<el-form-item label="服务名称">
			<el-input v-model="form.apiName" />
		</el-form-item>
		<el-form-item label="服务功能描述">
			<el-input v-model="form.apiNote" type="textarea" />
		</el-form-item>
		<el-form-item label="服务分组">
			<el-select v-model="form.groupName" placeholder="请选择分组">
				<el-option v-for="(item, index) in groups" :key="index" :label="item.name" :value="item.name" />
			</el-select>
		</el-form-item>
		<!-- <el-form-item label="服务所在数据源">
			<el-select v-model="form.datasource" placeholder="请选择数据源">
				<el-option v-for="(item, index) in datasource_list" :key="index" :label="item" :value="item" />
			</el-select>
		</el-form-item> -->
		<el-form-item>
			<el-button type="primary" @click="step += 3">下一步</el-button>
		</el-form-item>
	</el-form>
	<div v-else-if="step == 2">
		<el-form :model="form" label-width="120px" style="width: 80%;">
			<el-form-item label="业务关键字" style="margin-bottom:8px;align-content:center">
				<el-input v-model="keyword" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" :loading="loading" @click="onSearchSchema">查询相关操作表</el-button>
			</el-form-item>
		</el-form>
		<div v-if="isSearched">
			<el-table :data="schema" style="width: 100%">
				<el-table-column label="选择" width="100">
					<template #default="scope">
						<el-radio-group v-model="radio">
							<el-radio :label="scope.$index">{{ '方案' + (scope.$index + 1) }}</el-radio>
						</el-radio-group>
					</template>
				</el-table-column>
				<el-table-column type="expand">
					<template #default="props">
						<el-table :data="props.row.column">
							<el-table-column label="原始列名" prop="col_name" />
							<el-table-column label="标准化列名" prop="label" />
							<el-table-column label="数据类型" prop="type" />
						</el-table>
					</template>
				</el-table-column>
				<el-table-column label="来源数据库" prop="db" />
				<el-table-column label="表名" prop="table" />
			</el-table>
			<div style="margin-left: 120px;margin-top: 20px;">
				<el-button type="primary" @click="insert_config">下一步</el-button>
			<el-button @click="step -= 1">上一步</el-button>
			</div>
			
		</div>

	</div>
	<el-form :model="form" label-width="120px" style="width: 80%;margin-top: 20px;" v-else-if="step == 3">
		<el-form-item v-for="(item, key) in form['condition']" :label="key">

			<el-switch v-model="item['is_change']" active-text="调用时输入" inactive-text="固定值" style="margin:0 20px" />
			<el-space wrap v-if="!item['is_change']" style="width: 50%;">
				<el-input v-model="item['value']" placeholder="请输入参数值" style="width: 30%;" />
			</el-space>


		</el-form-item>
		<!-- <el-form-item label="上报图片">
			<el-upload>
				<el-button type="primary">点击上传</el-button>
			</el-upload>
		</el-form-item> -->

		<el-form-item>
			<el-button type="primary" @click="step += 1">下一步</el-button>
			<el-button @click="step -= 1">上一步</el-button>
		</el-form-item>
	</el-form>
	<div v-else>
		<el-descriptions title="服务信息确认" style="margin: 0 20px;" border>
			<el-descriptions-item label="服务名称">{{ form.apiName }}</el-descriptions-item>
			<el-descriptions-item label="服务功能描述">{{ form.apiNote }}</el-descriptions-item>
			<el-descriptions-item label="服务分组">{{ form.groupName }}</el-descriptions-item>
			<!-- <el-descriptions-item label="服务所在数据源">{{ form.datasource }} -->
			<!-- </el-descriptions-item> -->
		</el-descriptions>

		<el-form label-width="20px" style="width: 80%;margin-top: 20px;">

			<el-form-item>
				<el-button type="primary" @click="onSubmit">提交</el-button>
				<el-button @click="step -= 3">上一步</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
  
<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue'
import { Plus, Minus } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router';
import { Success } from '../../util/message';
import Api from '../../util/axios'
import { useService } from '../../stores/serviceStore';

let is_create = true
const step = ref(1)
const form = reactive({
	apiName: '',
	params: [''],
	filter: [''],
	groupName: '',
	datasource: '',
	apiNote: '',
	tableinfo: {}
})
const param_num = ref(form.params.length);
const router = useRouter()
const route = useRoute()
const groups = reactive<any[]>([])
const param_list = reactive<any[]>([])
const datasource_list = reactive<any[]>([])


onMounted(() => {
	if (route.matched[1].name == 'edit_service') {
		is_create = false
		let service = useService().data
		form.apiName = service['name']
		form.apiNote = service['note']
		form.groupName = service['groupId']
		form.datasource = service['datasourceId']
		param_num.value = service['params'].length
		form.params = service['params'].map(v => v['note'])
	}
	Api.post('/get_group').then((res: any) => {
		groups.push(...res)
	})
	// Api.post('/get_lable').then((res: any) => {
	// 	res.forEach(element => {
	// 		param_list.push({ value: element })
	// 	});
	// })
	Api.post('/show_datasource').then((res: any) => {
		res.forEach(element => {
			datasource_list.push(element.name)
		});
	})
})

const isSearched = ref(false)
const schema = ref<any[]>([])
const raw = reactive<any>([])
const radio = ref(0)
const keyword = ref('')
const loading = ref(false)
const onSearchSchema = () => {
	loading.value = true
	Api.post('/insert_api1', {
		'query': keyword.value
	}).then((res: any) => {
		schema.value = res
		console.log(schema.value[0]);
		isSearched.value = true
		loading.value = false
	})
	// schema.value = temp
	// 	isSearched.value = true
}

const insert_config = () => {
	// Api.post('/insert_api1', {
	// 	'query': keyword.value
	// }).then((res: any) => {
	// 	schema.value = res
	// 	console.log(schema.value[0]);
	// 	isSearched.value = true
	// })
	form.tableinfo = schema.value[radio.value]
	let temp = {}
	schema.value[radio.value]['column'].forEach(col => {
		temp[col['label']]={"value":'', "is_change":true}
	})
	form['condition']=temp
	step.value += 1
}

const onSubmit = () => {
	// Api.post('/insert_api2', form).then(res => {
		Success('创建成功')
		router.push({ name: 'service_list' })
	// })
}

</script>